<template>
    <div class="left" :style="{'height':height}">
        <div class="menu">
            <el-row>
                <el-col :span="24">
                    <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark" width="auto">
                        <router-link to="/" activeClass='active'>
                            <el-menu-item index="1">
                                <i class="icon iconfont icon-home menu-btn"></i>首页
                            </el-menu-item>
                        </router-link>
                        <el-submenu index="2">
                            <template slot="title"><i class="icon iconfont icon-people menu-btn"></i>用户管理</template>
                            <router-link to='/userlist'>
                                <el-menu-item index="2-1">
                                    <i class="icon iconfont icon-people1 menu-btn"></i>
                                    用户列表
                                </el-menu-item>
                            </router-link>
                            <router-link to='/editinfo'>
                                <el-menu-item index="2-2">
                                    <i class="icon iconfont icon-xiugai menu-btn"></i>编辑用户
                                </el-menu-item>
                            </router-link>
                            </el-submenu>
                        </el-submenu>
                        <router-link to='/upload'>
                            <el-menu-item index="3">
                                <i class="icon iconfont icon-download menu-btn"></i>上传管理
                            </el-menu-item>
                        </router-link>
                        <router-link to='/cate'>
                            <el-menu-item index="4">
                                <i class="icon iconfont icon-fenlei menu-btn"></i>分类管理
                            </el-menu-item>
                        </router-link>
                        <router-link to='/comment'>
                            <el-menu-item index="5">
                                <i class="icon iconfont icon-pinglun menu-btn"></i>评论管理
                            </el-menu-item>
                        </router-link>
                    </el-menu>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
  export default {
    data(){
        return{
            height:0,
        }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    created(){
        this.height=document.documentElement.clientHeight+'px';
    }
  }
</script>
<style lang="scss">
    .left{
        position:fixed;
        left:0px;
        top:60px;
        width:190px;
    }
    .menu{
        height:100%;
        background:#324057;
    }
    .menu-btn{
        margin-right:10px;
    }
    .active{
        color:white;
    }
</style>